{extend name="../../admin/view/main"}

{block name="content"}
<form autocomplete="off" class='layui-form layui-card' data-auto="true" id="PropertyForm" method="post" onsubmit="return false;">
    <div class="layui-card-body padding-40 padding-bottom-20">

        <label class="layui-form-item block relative">
            <span class="color-green font-w7">债权名称</span>
            <span class="color-desc margin-left-5">简单描述该债权的名称</span>
            <input class="layui-input" name="name" placeholder="请输入债权名称" required value="{$vo.name|default=''}">
        </label>

        <label class="layui-form-item block relative">
            <span class="color-green font-w7">债权所属人</span>
            <span class="color-desc margin-left-5">owner</span>
            <input class="layui-input" name="owner" placeholder="请输入债权所属人" required value="{$vo.owner|default=''}">
        </label>

        <label class="layui-form-item block relative">
            <span class="color-green font-w7">债权抵押人</span>
            <span class="color-desc margin-left-5">mortgagor</span>
            <input class="layui-input" name="mortgagor" placeholder="请输入债权抵押人" required value="{$vo.mortgagor|default=''}">
        </label>

        <label class="layui-form-item block relative">
            <span class="color-green font-w7">债权价值</span>
            <span class="color-desc margin-left-5">cost</span>
            <input class="layui-input" name="cost" min="0" type="number" placeholder="请输入债权价值" required value="{$vo.cost|default=''}">
        </label>

        <label class="layui-form-item block relative">
            <span class="color-green font-w7">抵押日期</span>
            <span class="color-desc margin-left-5">cost</span>
            <input class="layui-input" name="date" id="date"  placeholder="yyy-mm-dd" required value="{$vo.date|default=''}">
        </label>

        <div class="hr-line-dashed margin-top-40"></div>

        <div class="think-box-shadow">
            <form autocomplete="off" class='layui-form layui-card' id="DataForm" onsubmit="return false;" style="width:850px">
                <div class="layui-card-header text-center margin-20 font-w7 color-text layui-bg-gray border-radius-5">
                    资产图片<span class="color-desc font-s12"> ( 可上传多张 )</span>
                </div>
                <div class="layui-card-body margin-top-20 padding-bottom-0">
                    <div class="padding-left-20" data-rule-list>
                        <div class="layui-form-item text-center">
                            <a class="layui-btn layui-btn-primary" data-item-add>添加图片</a>
                        </div>
                    </div>
                    <div class="hr-line-dashed margin-top-30"></div>
                </div>
            </form>
        </div>

        <div class="layui-hide" data-item-tpl>
            <div class="layui-form-item" data-rule-item>
                <div class="layui-input-inline nowrap relative" style="width:180px">
                    <input data-upload-image name="img[]" type="hidden">
                </div>
                <label class="layui-inline nowrap relative margin-bottom-5 layui-row" >
                    <a class="layui-btn layui-btn-primary" data-item-up><i class="layui-icon layui-icon-up margin-0"></i></a>
                    <a class="layui-btn layui-btn-primary" data-item-dn><i class="layui-icon layui-icon-down margin-0"></i></a>
                    <a class="layui-btn layui-btn-primary" data-item-rm><i class="layui-icon layui-icon-close margin-0"></i></a>
                </label>
            </div>
        </div>



        {notempty name='vo.id'}<input name="id" type="hidden" value="{$vo.id}">{/notempty}

        <div class="layui-form-item text-center margin-top-20">
            <button class="layui-btn layui-btn-danger" onclick="pageBack()" type="button">取消编辑</button>
            <button class="layui-btn" type="submit">保存债权</button>
        </div>

        <label class="layui-hide">
            <textarea id="DefaultData">{$data|default=''}</textarea>
        </label>
    </div>

</form>
{/block}

{block name='script'}

<style>
    [data-rule-page] {
        margin-top: -3px;
        margin-left: 5px;
    }

    [data-rule-item] {
        padding-left: 40px;
        margin-bottom: 20px;
    }

    [data-rule-item] .uploadimage {
        width: 135px;
        height: 100px;
    }

    [data-item-dn], [data-item-up], [data-item-rm] {
        margin-top: -4px;
        margin-left: 5px;
    }
</style>

<script>
    window.form.render();

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //常规用法
        laydate.render({
            elem: '#date'
        });
    });

    (function (data) {
        console.log(data)
        /*! 默认数据渲染 */
        if (data.length < 1) addItem();
        else data.forEach(function (item) {
            addItem(item)
        });
        /*! 初始化上传插件 */
        (function initUpload() {
            $('[data-rule-list] input[data-upload-image]').map(function () {
                if (!$(this).attr('inited')) $(this).attr('inited', true).uploadOneImage();
            });
            setTimeout(initUpload, 100);
        })();
        /*! 数据选项操作 */
        $('[data-rule-list]').on('click', '[data-rule-page]', function ($that) {
            $that = $(this), top.setItemValue = function (value) {
                $that.prevAll('input').val(($that.data('prefix') + '#{v}').replace('{v}', value));
            };
            $.form.iframe($(this).data('rule-page'), $that.data('title') || $that.text(), ['930px', '600px']);
        }).on('click', '[data-item-add]', function () {
            addItem();
        }).on('click', '[data-item-rm]', function () {
            $(this).parents('[data-rule-item]').remove();
        }).on('click', '[data-item-up]', function () {
            var item = $(this).parents('[data-rule-item]');
            var prev = item.prev('[data-rule-item]');
            if (item.index() > 0) item.insertBefore(prev);
        }).on('click', '[data-item-dn]', function () {
            var item = $(this).parents('[data-rule-item]');
            var next = item.next('[data-rule-item]');
            if (next) item.insertAfter(next);
        });
        /*! 表单提交处理 */
        $('form#DataForm').vali(function (ret) {
            var idx, data = [];
            for (idx in ret.img) {
                if (!ret.img[idx]) return $.msg.tips('请上传展示图片哦！');
                data.push({img: ret.img[idx], rule: ret.rule[idx], name: ret.name[idx]});
            }
            $.form.load('{$request->url()}', {data: JSON.stringify(data)}, 'post');
        });
    })(JSON.parse($('#DefaultData').val() || '[]') || []);

    /*! 添加数据选项 */
    function addItem(data) {

        this.$html = $($('[data-item-tpl]').html());
        if (data) for (this.index in data) {
            this.$html.find('[name^="' + this.index + '"]').val(data[this.index]);
        }
        $('[data-item-add]').parent().before(this.$html), setTimeout(function () {
            $.form.reInit();
        }, 100);
    }
</script>
{/block}